<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Monaco</title>

	<style type="text/css">
		html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	</style>
</head>
<body>

	<div id="container" style="width: 100%; height: 100%"></div>

	<script src="resource://zotero/vs/loader.js"></script>
	<script>
		var container = document.getElementById('container');
		var editor, globalEditor;

		require.config({ paths: { vs: 'resource://zotero/vs' } });

		let proxy = URL.createObjectURL(
			new Blob(
			    [`
					self.MonacoEnvironment = {
						baseUrl: 'resource://zotero/'
					};
					importScripts('resource://zotero/vs/base/worker/workerMain.js');
				`],
			    { type: "text/javascript" }
		    )
		);
		window.MonacoEnvironment = { getWorkerUrl: () => proxy };

		require(['vs/editor/editor.main'], function () {
			globalEditor = monaco;

			monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
				target: monaco.languages.typescript.ScriptTarget.ES6,
				allowNonTsExtensions: true // needed for peeking definitions from in-memory models to work
			});

			editor = monaco.editor.create(container, {
				theme: 'vs-dark',
				language: 'javascript',
				scrollBeyondLastLine: false,
				minimap: { enabled: false }
			});

			window.onresize = function () {
				editor.layout();
			};
		});
	</script>
	
</body>
</html>